packages/typegen/web/src/components/metadata-fields-dialog/FieldsDataGrid.tsx (1)

76-83: Extract the scroll-height magic number into named constants.

Line 82 hardcodes 280px, which couples grid height to sibling layout details and can drift as dialog spacing changes. Please replace it with descriptive constants (or a shared CSS variable) to keep this stable and self-documenting.

💡 Suggested refactor

+const METADATA_DIALOG_MAX_HEIGHT_VH = 90;
+const METADATA_DIALOG_RESERVED_HEIGHT_PX = 280;
+const FIELDS_GRID_HEIGHT = `calc(${METADATA_DIALOG_MAX_HEIGHT_VH}vh - ${METADATA_DIALOG_RESERVED_HEIGHT_PX}px)` as const;
...
         <div
           className="overflow-auto"
           ref={tableContainerRef}
           style={{
             contain: "strict",
-            height: "calc(90vh - 280px)", // Adjust based on dialog header and search input height
+            height: FIELDS_GRID_HEIGHT,
           }}
         >

As per coding guidelines, Use meaningful variable names instead of magic numbers - extract constants with descriptive names.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@packages/typegen/web/src/components/metadata-fields-dialog/FieldsDataGrid.tsx`
around lines 76 - 83, Replace the hardcoded "280px" magic number used in the
inline style on the DataGrid container with a named constant or CSS variable:
introduce a descriptive constant (e.g., DIALOG_HEADER_AND_SEARCH_HEIGHT or CSS
var --dialog-header-search-height) and use it inside the height calculation on
the element referenced by tableContainerRef within FieldsDataGrid (the inline
style currently using "calc(90vh - 280px)"). Update any related comments to
reference the constant name and ensure the constant/variable is exported or
defined near the component so future layout changes only require updating that
single symbol.